// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

$btnHeight: 24px;
$btnMinWidth: 120px;
$btnIconSize: 14px;
.btn {
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  @include rem-fallback(padding, 0px, $btnHeight);
  @include rem-fallback(min-width, $btnMinWidth);

  .btn-icon {
    @include rem-fallback(height, $btnHeight);
    @include rem-fallback(width, $btnIconSize);

    svg { @include square-px-rem($btnIconSize); }

    + .btn-text { @include rem-fallback(padding-left, 5px); }
  }

  .btn-text {
    @include rem-fallback(line-height, $btnHeight);
    @include rem-fallback(padding-right, (($btnHeight - $btnIconSize) / 2));
    @include rem-font-size(14px);
  }

  &:disabled {
    cursor: auto;

    .btn-icon { display: none; }
  }

  @include themify($themes) {
    color: themed('colorBtnText');
    background-color: themed('colorBtnBackground');

    .btn-icon svg { fill: themed('colorBtnSvgFill'); }

    &:focus { outline: 1px dashed themed('colorBtnOutlineFocus'); }

    &:hover {
      color: themed('colorBtnTextHover');
      background-color: themed('colorBtnBackgroundHover');

      .btn-icon svg { fill: themed('colorBtnSvgFillHover'); }
    }

    &:active {
      color: themed('colorBtnTextActive');
      background-color: themed('colorBtnBackgroundActive');

      .btn-icon svg { fill: themed('colorBtnSvgFillActive'); }
    }

    &:disabled {
      color: themed('colorBtnTextDisabled');
      background-color: themed('colorBtnBackgroundDisabled');

      .btn-icon svg { fill: themed('colorBtnSvgFillDisabled'); }
    }

    &.btn-primary {
      color: themed('colorBtnPrimaryText');
      background-color: themed('colorBtnPrimaryBackground');

      .btn-icon svg { fill: themed('colorBtnPrimarySvgFill'); }

      &:hover {
        color: themed('colorBtnPrimaryTextHover');
        background-color: themed('colorBtnPrimaryBackgroundHover');

        .btn-icon svg { fill: themed('colorBtnPrimarySvgFillHover'); }
      }

      &:active {
        color: themed('colorBtnPrimaryTextActive');
        background-color: themed('colorBtnPrimaryBackgroundActive');

        .btn-icon svg { fill: themed('colorBtnPrimarySvgFillActive'); }
      }

      &:disabled {
        color: themed('colorBtnPrimaryTextDisabled');
        background-color: themed('colorBtnPrimaryBackgroundDisabled');

        .btn-icon svg { fill: themed('colorBtnPrimarySvgFillDisabled'); }
      }
    }
  }
}
